/**
 * Author: Shen Yanqiu
 * Date: 2018-02-27
 * Time: 9:38
 *
 */
import React from 'react';
import { Page } from 'components';
import { Row, Col, Table, Card, Progress } from 'antd';
import { connect } from 'dva';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import styles from './style.less';

class SatisfactionStatisticsDetails extends React.Component {
  static propTypes = {
    loading: PropTypes.object,
    satisfactionStatisticsDetails: PropTypes.object,
    dispatch: PropTypes.func,
  };
  componentWillMount () {
    const { match, dispatch } = this.props;
    const id = match.params.id;
    dispatch({
      type: 'satisfactionStatisticsDetails/refreshDetails',
      payload: { id },
    });
  }
  render () {
    const { loading, satisfactionStatisticsDetails, dispatch } = this.props;
    const { list, pagination, detailsInfo } = satisfactionStatisticsDetails;
    const { exponent, details } = detailsInfo;
    const columns = [{
      width: 100,
      title: "序号",
      dataIndex: "id",
      key: "id",
    }, {
      width: 300,
      title: "名称",
      dataIndex: "name",
      key: "name",
    }, {
      width: 300,
      title: "占比",
      dataIndex: "proportion",
      key: "proportion",
      render: (text, record) => <span>{ text }%</span>,
    }, {
      title: "走势图",
      key: "zsImage",
      width: 400,
      render: (text, record) => {
        return (
          <div>
            <Progress percent={record.proportion} showInfo={false} size="small" />
          </div>
        );
      },
    }, {
      width: 300,
    }];
    const columnsDetails = [{
      width: 100,
      title: "序号",
      dataIndex: "id",
      key: "id",
    }, {
      width: 300,
      title: "名称",
      dataIndex: "name",
      key: "name",
    }, {
      width: 300,
      title: "理由",
      dataIndex: "reason",
      key: "reason",
    }, {
      width: 700,
    }];
    return (
      <Page loading={loading.effects['satisfactionStatisticsDetails/refreshDetails']}>
        <Row className={styles.satisfactionStatisticsDetails}>
          <Col span={24}>
            <Card title={<span className={styles.CardTitle}>指数</span>} bordered={false} className={styles.CardTable}>
              <Table
                dataSource={exponent}
                columns={columns}
                rowKey={r => r.id}
                // scroll={{ x: 1100, y: false }}
                pagination={false}
                loading={loading.effects['satisfactionStatisticsDetails/loadTableList']}
              />
            </Card>
          </Col>
          <Col span={24} className={styles.MarginTop}>
            <Card title={<span className={styles.CardTitle}>详情</span>} bordered={false} extra={<Link to={`/satisfaction-statistics/details/${this.props.match.params.id}`}>更多</Link>} className={styles.CardTable}>
              <Table
                dataSource={details}
                columns={columnsDetails}
                rowKey={r => r.id}
                // scroll={{ x: 1100, y: false }}
                pagination={false}
                loading={loading.effects['satisfactionStatisticsDetails/loadTableList']}
              />
            </Card>
          </Col>
        </Row>
      </Page>
    );
  }
}
export default connect(({ loading, satisfactionStatisticsDetails }) => ({ loading, satisfactionStatisticsDetails }))(SatisfactionStatisticsDetails);
